<template>
  <div class="message-input">
    <div class="input-tools">
      <button class="btn-icon">
        <Icon icon="mdi:emoji" />
      </button>
      <button class="btn-icon">
        <Icon icon="mdi:image" />
      </button>
      <button class="btn-icon">
        <Icon icon="mdi:file" />
      </button>
    </div>
    <div class="input-area">
      <textarea
        v-model="messageText"
        placeholder="输入消息..."
        @keydown="handleKeyDown"
        @keyup="handleKeyUp"
        @input="adjustTextareaHeight"
        ref="textarea"
      ></textarea>
      <button class="send-btn" @click="sendMessage" :disabled="!messageText.trim()">
        <Icon icon="mdi:send" />发送
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { Icon } from '@iconify/vue';
import { useChatStore } from '@/stores/chat'
import { signalRService } from '@/services/signalr'
import { debounce } from 'lodash-es'

const chatStore = useChatStore()
const messageText = ref('')
const textarea = ref(null)
const isTyping = ref(false)

const currentChat = computed(() => chatStore.currentChat)

const sendMessage = () => {
  if (!messageText.value.trim() || !currentChat.value) return
  
  if (currentChat.value.type === 'private') {
    chatStore.sendPrivateMessage(currentChat.value.id, messageText.value.trim())
  } else {
    chatStore.sendGroupMessage(currentChat.value.id, messageText.value.trim())
  }
  
  messageText.value = ''
  adjustTextareaHeight()
  signalRService.typing(currentChat.value.id, false)
  isTyping.value = false
}

const handleKeyDown = (event) => {
  if (event.key === 'Enter' && !event.shiftKey) {
    event.preventDefault()
    sendMessage()
  }
}

const handleKeyUp = debounce(() => {
  if (currentChat.value && currentChat.value.type === 'private') {
    if (messageText.value.trim() && !isTyping.value) {
      signalRService.typing(currentChat.value.id, true)
      isTyping.value = true
    } else if (!messageText.value.trim() && isTyping.value) {
      signalRService.typing(currentChat.value.id, false)
      isTyping.value = false
    }
  }
}, 300)

const adjustTextareaHeight = () => {
  if (textarea.value) {
    textarea.value.style.height = 'auto'
    textarea.value.style.height = Math.min(textarea.value.scrollHeight, 120) + 'px'
  }
}

// 监听当前聊天变化，重置输入状态
watch(currentChat, () => {
  if (isTyping.value && currentChat.value) {
    signalRService.typing(currentChat.value.id, false)
    isTyping.value = false
  }
})
</script>

<style scoped>
.message-input {
  padding: 1rem;
  border-top: 1px solid #e0e0e0;
  background-color: white;
}

.input-tools {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
}

.btn-icon:hover {
  background-color: #f0f0f0;
}

.input-area {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

textarea {
  flex: 1;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 0.5rem;
  resize: none;
  min-height: 40px;
  max-height: 120px;
  font-family: inherit;
}

textarea:focus {
  outline: none;
  border-color: #07c160;
}

.send-btn {
  background-color: #07c160;
  border: none;
  border-radius: 4px;
  padding: 0.5rem;
  cursor: pointer;
  color: white;
}

.send-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>